﻿$(function () {
  echarts_1();
  echarts_2();
  echarts_4();
  // echarts_31();
  // echarts_32();
  // echarts_33();
  echarts_5();
  echarts_6();
  echarts_9();
  function echarts_1() {

    // 基于准备好的dom，初始化echarts实例

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart1'));

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#dddc6b'
          }
        }
      },
      legend: {
        top: '0%',
        data: ['用户数'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      grid: {
        left: '10',
        top: '30',
        right: '10',
        bottom: '10',
        containLabel: true
      },

      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }

        },

        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']

      }, {

        axisPointer: {show: false},
        axisLine: {show: false},
        position: 'bottom',
        offset: 20,


      }],

      yAxis: [{
        type: 'value',
        axisTick: {show: false},
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },

        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [
        {
          name: '用户数',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#0184d5',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(1, 132, 213, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(1, 132, 213, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#0184d5',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: [50, 80, 100, 150, 180, 200, 220, 250, 280, 300, 320, 324, 352, 389, 390, 392, 392, 401, 444]
        },
      ]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });

/*    var myChart = echarts.init(document.getElementById('echart1'));

    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      }],
      series: [
        {
          type: 'line',
          data: [50, 80, 100, 150, 180, 200, 220, 250, 280, 300, 320, 324, 352, 389, 390, 392, 392, 401, 444],
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: '#2f89cf',
              opacity: 1,
              barBorderRadius: 5,
            }
          }
        }

      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });*/
  }

  function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart2'));
    option = {
      title: [{
        text: '',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {   //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {

        top: '80%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['鸡', '牛', '羊', '猪'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: {show: false},
          labelLine: {show: false},
          data: [
            {value: 1, name: '鸡'},
            {value: 4, name: '牛'},
            {value: 2, name: '羊'},
            {value: 2, name: '猪'}
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    /*var myChart = echarts.init(document.getElementById('echart2'));

    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {type: 'shadow'}
      },
      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      }],
      series: [
        {

          type: 'bar',
          data: [1500, 1200, 600, 200, 300, 300, 900],
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: '#27d08a',
              opacity: 1,
              barBorderRadius: 5,
            }
          }
        }

      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });*/
  }

  function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart5'));

    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },

      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'],
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      }],
      series: [{
        type: 'bar',
        data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
        barWidth: '35%', //柱子宽度
        // barGap: 1, //柱子之间间距
        itemStyle: {
          normal: {
            color: '#aaf69b',
            opacity: 1,
            barBorderRadius: 5,
          }
        }
      }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_9() {
    // 基于准备好的dom，初始化echarts实例
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart9'));

    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },

      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['鸡', '牛', '羊', '猪'],
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      }],
      series: [{
        type: 'bar',
        data: [40, 100, 80, 100],
        barWidth: '35%', //柱子宽度
        // barGap: 1, //柱子之间间距
        itemStyle: {
          normal: {
            color: '#2f89cf',
            opacity: 1,
            barBorderRadius: 5,
          }
        }
      }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    /* var myChart = echarts.init(document.getElementById('echart4'));

     option = {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           lineStyle: {
             color: '#dddc6b'
           }
         }
       },
       legend: {
         top: '0%',
         data: ['安卓', 'IOS'],
         textStyle: {
           color: 'rgba(255,255,255,.5)',
           fontSize: '12',
         }
       },
       grid: {
         left: '10',
         top: '30',
         right: '10',
         bottom: '10',
         containLabel: true
       },

       xAxis: [{
         type: 'category',
         boundaryGap: false,
         axisLabel: {
           textStyle: {
             color: "rgba(255,255,255,.6)",
             fontSize: 12,
           },
         },
         axisLine: {
           lineStyle: {
             color: 'rgba(255,255,255,.2)'
           }

         },

         data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

       }, {

         axisPointer: {show: false},
         axisLine: {show: false},
         position: 'bottom',
         offset: 20,


       }],

       yAxis: [{
         type: 'value',
         axisTick: {show: false},
         axisLine: {
           lineStyle: {
             color: 'rgba(255,255,255,.1)'
           }
         },
         axisLabel: {
           textStyle: {
             color: "rgba(255,255,255,.6)",
             fontSize: 12,
           },
         },

         splitLine: {
           lineStyle: {
             color: 'rgba(255,255,255,.1)'
           }
         }
       }],
       series: [
         {
           name: '安卓',
           type: 'line',
           smooth: true,
           symbol: 'circle',
           symbolSize: 5,
           showSymbol: false,
           lineStyle: {

             normal: {
               color: '#0184d5',
               width: 2
             }
           },
           areaStyle: {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
                 color: 'rgba(1, 132, 213, 0.4)'
               }, {
                 offset: 0.8,
                 color: 'rgba(1, 132, 213, 0.1)'
               }], false),
               shadowColor: 'rgba(0, 0, 0, 0.1)',
             }
           },
           itemStyle: {
             normal: {
               color: '#0184d5',
               borderColor: 'rgba(221, 220, 107, .1)',
               borderWidth: 12
             }
           },
           data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

         },
         {
           name: 'IOS',
           type: 'line',
           smooth: true,
           symbol: 'circle',
           symbolSize: 5,
           showSymbol: false,
           lineStyle: {

             normal: {
               color: '#00d887',
               width: 2
             }
           },
           areaStyle: {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
                 color: 'rgba(0, 216, 135, 0.4)'
               }, {
                 offset: 0.8,
                 color: 'rgba(0, 216, 135, 0.1)'
               }], false),
               shadowColor: 'rgba(0, 0, 0, 0.1)',
             }
           },
           itemStyle: {
             normal: {
               color: '#00d887',
               borderColor: 'rgba(221, 220, 107, .1)',
               borderWidth: 12
             }
           },
           data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

         },

       ]

     };

     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
     window.addEventListener("resize", function () {
       myChart.resize();
     });*/
  }

  function echarts_4() {
    // 基于准备好的dom，初始化echarts实例
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart4'));

    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },

      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['温度', '湿度', '二氧化碳', '氨气', '风速', '光照强度'],
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      }],
      series: [{
        type: 'bar',
        data: [40, 100, 80, 0, 50,100],
        barWidth: '35%', //柱子宽度
        // barGap: 1, //柱子之间间距
        itemStyle: {
          normal: {
            color: '#2f89cf',
            opacity: 1,
            barBorderRadius: 5,
          }
        }
      }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
   /* var myChart = echarts.init(document.getElementById('echart4'));

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#dddc6b'
          }
        }
      },
      legend: {
        top: '0%',
        data: ['安卓', 'IOS'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      grid: {
        left: '10',
        top: '30',
        right: '10',
        bottom: '10',
        containLabel: true
      },

      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }

        },

        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

      }, {

        axisPointer: {show: false},
        axisLine: {show: false},
        position: 'bottom',
        offset: 20,


      }],

      yAxis: [{
        type: 'value',
        axisTick: {show: false},
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },

        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [
        {
          name: '安卓',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#0184d5',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(1, 132, 213, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(1, 132, 213, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#0184d5',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

        },
        {
          name: 'IOS',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#00d887',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 216, 135, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 216, 135, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#00d887',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

        },

      ]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });*/
  }

  function echarts_6() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart6'));

    var dataStyle = {
      normal: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        //shadowBlur: 40,
        //shadowColor: 'rgba(40, 40, 40, 1)',
      }
    };
    var placeHolderStyle = {
      normal: {
        color: 'rgba(255,255,255,.05)',
        label: {show: false,},
        labelLine: {show: false}
      },
      emphasis: {
        color: 'rgba(0,0,0,0)'
      }
    };
    option = {
      color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
      tooltip: {
        show: true,
        formatter: "{a} : {c} "
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 12,
        bottom: '3%',

        data: ['鸡', '牛', '羊', '猪'],
        textStyle: {
          color: 'rgba(255,255,255,.6)',
        }
      },

      series: [
        {
          name: '鸡',
          type: 'pie',
          clockWise: false,
          center: ['50%', '42%'],
          radius: ['59%', '70%'],
          itemStyle: dataStyle,
          hoverAnimation: false,
          data: [{
            value: 80,
            name: '01'
          }, {
            value: 20,
            name: 'invisible',
            tooltip: {show: false},
            itemStyle: placeHolderStyle
          }]
        },
        {
          name: '牛',
          type: 'pie',
          clockWise: false,
          center: ['50%', '42%'],
          radius: ['49%', '60%'],
          itemStyle: dataStyle,
          hoverAnimation: false,
          data: [{
            value: 70,
            name: '02'
          }, {
            value: 30,
            name: 'invisible',
            tooltip: {show: false},
            itemStyle: placeHolderStyle
          }]
        },
        {
          name: '羊',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          center: ['50%', '42%'],
          radius: ['39%', '50%'],
          itemStyle: dataStyle,
          data: [{
            value: 65,
            name: '03'
          }, {
            value: 35,
            name: 'invisible',
            tooltip: {show: false},
            itemStyle: placeHolderStyle
          }]
        },
        {
          name: '猪',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          center: ['50%', '42%'],
          radius: ['29%', '40%'],
          itemStyle: dataStyle,
          data: [{
            value: 60,
            name: '04'
          }, {
            value: 40,
            name: 'invisible',
            tooltip: {show: false},
            itemStyle: placeHolderStyle
          }]
        },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_31() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb1'));
    option = {

      title: [{
        text: '年龄分布',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {   //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {

        top: '70%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: {show: false},
          labelLine: {show: false},
          data: [
            {value: 1, name: '0岁以下'},
            {value: 4, name: '20-29岁'},
            {value: 2, name: '30-39岁'},
            {value: 2, name: '40-49岁'},
            {value: 1, name: '50岁以上'},
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_32() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb2'));
    option = {

      title: [{
        text: '职业分布',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {   //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {

        top: '70%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['电子商务', '教育', 'IT/互联网', '金融', '学生', '其他'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: {show: false},
          labelLine: {show: false},
          data: [
            {value: 5, name: '电子商务'},
            {value: 1, name: '教育'},
            {value: 6, name: 'IT/互联网'},
            {value: 2, name: '金融'},
            {value: 1, name: '学生'},
            {value: 1, name: '其他'},
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_33() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb3'));
    option = {
      title: [{
        text: '兴趣分布',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {   //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {
        top: '70%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['汽车', '旅游', '财经', '教育', '软件', '其他'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      series: [
        {
          name: '兴趣分布',
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: {show: false},
          labelLine: {show: false},
          data: [
            {value: 2, name: '汽车'},
            {value: 3, name: '旅游'},
            {value: 1, name: '财经'},
            {value: 4, name: '教育'},
            {value: 8, name: '软件'},
            {value: 1, name: '其他'},
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }


})



		
		
		


		









